<template>
    <div class="stream">
        <li>直播管理</li>
        <el-card class="box-card">
            <div class="stream-head">
                <div class="streamState">
                        <span>直播状态：</span>
                        <el-select v-model="value" clearable placeholder="请选择" @change="filtrateStream" >
                            <el-option label="直播中" value="直播中"></el-option>
                            <el-option label="已结束" value="已结束"></el-option>
                        </el-select>
                </div>
                <div class="brokerSearch">
                    <span>经纪人:</span>
                    <el-input placeholder="请输入内容" v-model="input3">
                        <el-button slot="append" icon="el-icon-search" @click="searchStream"></el-button>
                    </el-input>
                </div>
            </div>
            <h3>全部直播</h3>
            <div class="streamHouse">
                <dl v-for="v in streamList" :key="v.id"  @click="()=>{this.$router.router('/detail')}">
                    <dt>
                        <img :src="v.img" alt="">
                        <span>{{v.ongoing}}</span>
                    </dt>
                    <dd>
                        <p>{{v.title}}</p>
                        <li>
                            <span>{{v.name}}</span>
                            <span>{{v.date}}</span>
                        </li>
                        <li>
                            <el-button type="text">{{v.ongoing === '直播中'?'进入直播':'回看'}}</el-button>
                            <p v-if="v.ongoing === '直播中'">
                                <el-switch v-model="isFlag"></el-switch>
                            </p>
                            <p v-else>
                                <el-button type="text">删除</el-button>
                            </p>
                        </li>
                    </dd>
                </dl>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[6, 12, 18, 24]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      input3: '',
      isFlag: true,
      streamList: [],
      page: {
        pageNum: 1,
        pageSize: 6
      },
      total: 0
    }
  },
  created () {
    this.getStreamList()
  },
  methods: {
    getStreamList () {
      this.$api.getStream(this.page).then(res => {
        if (res.data.code === 1) {
          this.$message.success('获取成功')
          this.streamList = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getStreamList()
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getStreamList()
    },
    searchStream () {
      this.$api.streamSearch({ name: this.input3 }).then(res => {
        this.streamList = res.data.data
      })
    },
    filtrateStream () {
      this.$api.streamFiltrate({ ongoing: this.value }).then(res => {
        if (res.data.code === 1) {
          this.streamList = res.data.data
          this.$message.success('筛选成功')
        }
      })
    }
  }
}
</script>

<style scoped>
.stream{
    width: 100%;
    height: 100%;
}
.box-card{
    margin-top: 10px;
}
.stream-head{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}
.streamState{
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.brokerSearch{
    display: flex;
    align-items: center;
}
.brokerSearch span{
    width: 80px;
    text-align: center;
}
.box-card>h3{
    margin: 10px 0;
}
.streamHouse{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.streamHouse dl{
    width: calc(100%/6);
    padding: 10px;
    flex-shrink: 0;
}
.streamHouse dl dt{
    width: 100%;
    height: 150px;
    position: relative;
}
.streamHouse dl dt span{
    position: absolute;
    left: 5px;
    bottom: 5px;
    color: cornflowerblue;
    font-weight: bold;
}
.streamHouse dl dt img{
    width: 100%;
    height: 100%;
}
.streamHouse dl dd{
    width: 100%;
}
.streamHouse dl dd>p{
    width: 100%;
    height: 50px;
}
.streamHouse dl dd li{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0;
}
</style>
